<template>
  <div>
    <div class="search-con">
      <input
        type="text"
        v-model="keywords"
        placeholder="请输入图片标题进行搜索"
        @keydown="onSearch($event)"
      />
    </div>
    <!-- 图片分类区域 -->
    <div id="slider" class="mui-slider">
      <!-- 得去掉 mui-fullscreen 不能让滑动条占满全屏-->
      <!-- 但是当前还不能实现滑块的拖动，因为需要JS【https://dev.dcloud.net.cn/mui/ui/#scroll】-->
      <div
        id="sliderSegmentedControl"
        class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted"
      >
        <div class="mui-scroll">
          <!-- 使其默认高亮'全部' -->
          <span
            :class="[
              'mui-control-item',
              item.category_id === 0 ? 'mui-active' : '',
            ]"
            v-for="(item, index) in category"
            :key="index"
            @tap="getPhotoByCategory(item.category_id)"
          >
            {{ item.category_title }}
          </span>
        </div>
      </div>
    </div>

    <!-- 图片的列表区域 -->
    <ul class="lazyul">
      <!-- 使用了tag="li" 原因是在样式中就不用修改了 -->
      <router-link
        tag="li"
        v-for="item in reverseList"
        :key="item.id"
        :to="'/idssp/photos/photoinfo/' + item.id"
      >
        <!-- v-lazy是图片的懒加载效果 -->
        <!-- 注意：v-lazy 要指定图片的地址 -->
        <!-- <img v-lazy="item.img_url"> -->
        <!-- 先用本地的看效果 -->
        <img :src="circleUrl + item.img_url" height="250px" />
        <!-- <img src="../../assets/img/home/ad1.jpg" alt="" /> -->
        <div class="info">
          <h1 class="info-title">{{ item.title }}</h1>
          <div class="info-description">{{ item.description }}</div>
        </div>
      </router-link>
    </ul>
  </div>
</template>

<script>
// 导入mui的js文件来初始化 滑动控件
import mui from "../../../lib/mui/js/mui.js";
// 1.在项目中引入mui出错：'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
// 2.分析问题原因：webpack打包出来的 bundle.js中，默认启用了严格模式。而在项目中，import导入的mui.js使用了callee caller这些特性，恰好是在严格模式中不支持的。
// 关闭webpack严格模式更容易，因为不再需要改mui.js源代码了
// 3.如何关闭严格模式呢？安装插件:cnpm install babel-plugin-transform-remove-strict-mode -D及.babelrc添加一些代码
// 4.为什么移除严格模式后，滑动效果仍未实现？
// 原因：需要在'mounted'中初始化，因为一般插件初始化都在里面。
export default {
  data() {
    return {
      circleUrl: "http://localhost:9528/admin/news_info/downloadPic?img_url=",
      keywords: "",
      category: [
        {
          category_id: 0,
          category_title: "全部",
        },
        {
          category_id: 1,
          category_title: "空间设计",
        },
        {
          category_id: 2,
          category_title: "户型装饰",
        },
        {
          category_id: 3,
          category_title: "潮流时尚",
        },
        {
          category_id: 4,
          category_title: "家居生活",
        },
      ], //所有的图片分类数据
      photolist: [], //图片列表
    };
  },
  created() {
    // this.getPhotoCategory();
    this.getPhotoByCategory(0);
  },
  computed:{
    reverseList(){
      return this.photolist.reverse();
    }
  },
  methods: {
    onSearch(e) {
      if (e.keyCode == 13) {
        this.$http
          .get("/searchPhotos", {
            params: {
              title: this.keywords,
            },
          })
          .then((res) => {
            if (res.data.errcode === 200) {
              const data = res.data.message;
              this.photolist = data;
            } else {
              this.photolist = [];
            }
          });
      }
    },
    getPhotoCategory() {
      this.$http.get("/getImgCategory").then((res) => {
        if (res.data.errcode === 200) {
          let data = res.data.message;
          // 手动补全分类信息,因为API中没有"全部"的信息
          data.unshift({ category_title: "全部", category_id: 0 });
          this.category = data;
        } else {
          this.category = [];
        }
      });
    },
    getPhotoByCategory(id) {
      this.$http
        .get("/getImages", {
          params: {
            category_id: id,
          },
        })
        .then((res) => {
          if (res.data.errcode === 200) {
            let data = res.data.message;
            this.photolist = data;
          } else {
            this.photolist = [];
          }
        });
    },
  },
  mounted() {
    //此钩子函数执行的时候，才可以进行控件或插件的初始化工作
    mui(".mui-scroll-wrapper").scroll({
      deceleration: 0.0005, //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
    });
  },
};
</script>

<style lang="scss" scoped>
.search-con {
  position: fixed;
  top: 40px;
  left: 0;
  right: 0;
  padding: 10px 10px 0 10px;
  background-color: #fff;
  z-index: 999;
  input {
    text-indent: 20px;
    height: 35px;
    background: url("../../assets/img/search.png") no-repeat;
    background-size: 7% 70%;
    background-position-x: left;
    background-position-y: center;
  }
}
.mui-slider {
  position: fixed;
  top: 94px;
  left: 0;
  right: 0;
  touch-action: pan-x;
  z-index: 99;
  background-color: #fff;
}
.lazyul {
  margin-top: 94px;
  padding: 10px;
  li {
    list-style: none;
    background-color: #ccc; //不设置的话，懒加载由于是白色的与背景色一样，就会消失掉。所以不能不设置颜色
    text-align: center; //让懒加载居中
    // 扩散7像素
    box-shadow: 0 0 7px gray;
    position: relative;
    & + li {
      margin-top: 10px;
    }
    /* +号选择器，能排除第一个，选中其余的所有加样式
        li + li{  
            margin-top:10px;
        }
    */
    img {
      vertical-align: middle; //将图片上下之间的间隔去掉
      width: 100%;
    }
    img[lazy="loading"] {
      width: 40px;
      height: 300px;
      margin: auto;
    }
  }
}
.info {
  width: 100%;
  position: absolute; //加绝对定位，使文字能浮现在图片上,但是此时字体的位置没有到想要的位置
  bottom: 0; //所以得让li变成相对定位，然后将文字的bottom底部为0，使其能呈现在图片内的下方
  color: #fff;
  background-color: rgba(0, 0, 0, 0.5);
  max-height: 86px;
  overflow: hidden;
  .info-title {
    font-size: 14px;
  }
  .info-description {
    font-size: 13px;
    text-align: left;
    text-indent: 2em;
    white-space: nowrap; //不换行
    width: 352px; //宽度必须设置
    overflow: hidden;
    text-overflow: ellipsis; //溢出的文字使用...显示
  }
}
</style>